/**
 date: 2018-4-22 11:21:19
 auther: fky
 */
import {Component, Input} from '@angular/core';
import {UserModel} from '../../../models/user.model';
import {NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';
import {UserRoleModel} from '../../../models/user-role.model';

@Component({
  selector: 'ngx-edit-user',
  template: `
    <div class="modal-header">
      <span>{{ user.userName }}</span>
      <button class="close" aria-label="Close" (click)="closeModal()">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="modal-body">
      <div class="row">
        <div class="col-3" style="text-align: right; padding-top: 5px;">User Name:</div>
        <div class="col-3">
          <input type="text" class="form-control" value="{{user.userName}}"/>
        </div>
      </div>
      <div class="row">
        <div class="col-3" style="text-align: right; padding-top: 5px;">Password:</div>
        <div class="col-3">
          <button class="btn btn-warning  btn-tn">Send reset email</button>
        </div>
      </div>
      <div class="row" >
        <div class="col-3" style="text-align: right; padding-top: 5px;">User Role:</div>
        <div class="col-3" >
          <select class="form-control" style="height: 34px;">
            <option *ngFor="let role of roles">
              {{role.roleName}}
            </option>
          </select>
        </div>
      </div>
    </div>
    <div class="modal-footer">
      <button class="btn btn-md btn-primary" (click)="closeModal()">Save changes</button>
    </div>
  `,
  styles: ['.row{margin-bottom: 10px;} .form-control{padding: 3px;}'],
})

export class EditUserComponent {
  @Input() user: UserModel;

  @Input() roles: UserRoleModel[];

  constructor(private activeModal: NgbActiveModal) {
  }

  closeModal() {
    this.activeModal.close();
  }
}
